<template>
  <SearchForm
  :searchData="pagination"
  @clearSearch="clearSearch"
  @search="search"
  @resetSearch = "resetSearch"
  ></SearchForm>

  <DialogForm 
  :title = "title"
  :visible="visible"
  :data="formBaseData"
  @handleClose="handleClose"
  @handleAdd="handleAdd"
  @handleEdit="handleEditForm"
  ></DialogForm>

<TableList
  :data="data"
  :pagination="pagination"
  @onChange="onChange"
  @handleBulid="handleBulid"
  @handleEdit="handleEdit"
  @handleClickDelete="handleClickDelete"
  @handleForbidden="handleForbidden"
  >
</TableList>

<Delete
      :visible="dialogDeleteVisible"
      :delete-text="operateText"
      @handle-delete="handleDelete"
      @handle-close="handleDeleteClose"
    ></Delete>

    <!-- 禁用弹层 -->
    <Forbidden
      :visible="dialogVisible"
      :text="operateText"
      @handle-submit="handleForbiddenSub"
      @handle-close="handleForbiddenClose"
    ></Forbidden>
</template>

<script lang="tsx" setup>
import { ref, onMounted } from 'vue';
import { getProjectList,projectAdd,getProjectDetails,projectUpdate ,projectDelete,projectStatus} from '@/api/serve';
import TableList from './components/TableList.vue';
import SearchForm from './components/SearchForm.vue';
import DialogForm from './components/DialogForm.vue';
import { MessagePlugin } from 'tdesign-vue-next'
// 删除弹层
import Delete from '@/components/OperateDialog/index.vue'
// 禁用弹窗
import Forbidden from '@/components/Forbidden/index.vue'

const data = ref([]);
const formRef = ref(null)
const title = ref('') // 弹窗标题
const formBaseData = ref({}) // 弹窗表单内容
const dialogDeleteVisible = ref(false) // 控制删除弹层显示隐藏
const operateText = ref('护理项目') // 要操作的内容提示
const dialogVisible = ref(false) // 禁用弹窗

onMounted(() => {
  getList();
});

const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total:0,
  name: '',
  status: '',
});

//分页查询
const onChange = (pageInfo) => {
  console.log(pageInfo);
  pagination.value.pageNum = pageInfo.current;
  pagination.value.pageSize = pageInfo.pageSize;
  getList();
};

const getList = async () => {
  const res = await getProjectList(pagination.value);
  console.log("返回数据",res);
  data.value = res.data.records;
  pagination.value.total = res.data.total;
};

//搜索栏
//重置搜索框
const resetSearch = () => {
  //重置页码
  pagination.value = {
    pageNum: 1,
    pageSize: 10,
    total:0,
    name: '',
    status: '',
  }
  getList()
}

//搜索
const search = () => {
  //点击了搜索按钮之后，就需要重置页码
  pagination.value.pageNum = 1
  getList()
}

//清空
const clearSearch = (val) => {
  if(val === 'name'){
    delete pagination.value.name
  }else{
    delete pagination.value.status
  }
  getList()
}


//新增按钮开启弹窗
const visible = ref(false)

const handleClose = () => {
  title.value = '新增'
  visible.value = false
}
const handleBulid = () => {
  visible.value = true
  console.log('新增按钮开启');
}

//新增
// 添加
const handleAdd = async (val) => {
  const res = await projectAdd(val)
  if (res.code === 200) {
    MessagePlugin.success('添加成功')
    getList()
    handleClose()
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}
//编辑
const handleEdit =  (val) => {
  title.value = '编辑'
  visible.value = true
  getDetails(val.id)
}

//删除id
const typeId =ref()
// 点击删除
const handleClickDelete = (val) => {
  typeId.value = val.id
  dialogDeleteVisible.value = true
}

//确认删除
const handleDelete =async() => {
  const res = await projectDelete(typeId.value)
  if (res.code === 200) {
    MessagePlugin.success('删除成功')
    getList()
  } else {
    MessagePlugin.error(res.msg)
  }
  handleDeleteClose();
}
// 关闭删除弹层
const handleDeleteClose = () => {
  dialogDeleteVisible.value = false
}


// 禁用弹窗
const typeStatus = ref()
const statusText = ref('')

// 禁用弹窗
const handleForbidden = (val) => {
  typeId.value = val.id
  if (val.status === 1) {
    dialogVisible.value = true
    typeStatus.value = 0
    statusText.value = '禁用成功'
  } else {
    typeStatus.value = 1
    handleForbiddenSub()
    statusText.value = '启用成功'
  }
}

// 确定禁用
const handleForbiddenSub = async () => {
  const params = {
    id: typeId.value,
    status: typeStatus.value
  }
  const res: any = await projectStatus(params)
  if (res.code === 200) {
    dialogVisible.value = false
    MessagePlugin.success(statusText.value)
    getList()
  }
}

// 关闭禁用弹窗
const handleForbiddenClose = () => {
  dialogVisible.value = false
}

//查询详细信息
const getDetails = async (id) => {
  const res = await getProjectDetails(id)
  if (res.code === 200) {
    formBaseData.value = res.data
  }
  console.log(res);
}

//保存编辑后信息
const handleEditForm = async (val) => {
  const res = await projectUpdate(val)
  if (res.code === 200) {
    MessagePlugin.success('修改成功')
    getList()
    handleClose()
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}
</script>
